Tryit Editor v2.3

Edit This Code:
<!DOCTYPE html> <html> <head> <style> div { background-color: coral; border: 1px solid; padding: 50px; } </style> </head> <body> <p>This example demonstrates the difference between bubbling and capturing when adding event listeners.</p> <div id="myDiv"> <p id="myP">Click this paragraph, I am Bubbling.</p> </div><br> <div id="myDiv2"> <p id="myP2">Click this paragraph, I am Capturing.</p> </div> <script> document.getElementById("myP").addEventListener("click", function() { alert("You clicked the P element!"); }, false); document.getElementById("myDiv").addEventListener("click", function() { alert("You clicked the DIV element!"); }, false); document.getElementById("myP2").addEventListener("click", function() { alert("You clicked the P element!"); }, true); document.getElementById("myDiv2").addEventListener("click", function() { alert("You clicked the DIV element!"); }, true); </script> </body> <!-- Mirrored from www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_addeventlistener_capture by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 08:28:19 GMT --> </html>
Result:
Try it Yourself - © w3schools.com